<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true">
      <el-form-item label="公司名称：">
        <el-input
          v-model="searchObj.companyName"
          placeholder="请输入公司名称"
          clearable
          @change="fetchData()"
          @keyup.enter="fetchData()"/>
      </el-form-item>

      <el-form-item label="工程种类：">
        <el-input v-model="searchObj.projectType" disabled placeholder="不让你点" clearable @change="fetchData()"/>
      </el-form-item>

      <span style="line-height: 37px; margin-left: 700px">
        <span>数据总条数：<span style="font-size: larger; color: #1213e9">
          <b><count-to :start-val="0" :end-val="total" :duration="3000"/></b>
        </span></span>
        <span style="margin-left: 20px">
          已清洗：<span style="font-size: larger; color: #1213e9">
            <b><count-to :start-val="0" :end-val="isCleanNum" :duration="3000"/></b>
          </span>
        </span>
        <span style="margin-left: 20px">
          未清洗：<span style="font-size: larger; color: #1213e9">
            <b><count-to :start-val="0" :end-val="isNotCleanNum" :duration="3000"/></b>
          </span>
        </span>
      </span>

    </el-form>
    <el-form :inline="true">
      <el-form-item label="注册资本：">
        <el-radio-group v-model="capitalMoney" @change="capitalMoneyChange()">
          <el-radio :label="0">默认</el-radio>
          <el-radio :label="1">1万以下</el-radio>
          <el-radio :label="2">1-5万</el-radio>
          <el-radio :label="3">5-10万</el-radio>
          <el-radio :label="4">10万以上</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="成立时间：">
        <el-radio-group v-model="dateEstaRadio" @change="dateEstaChange()">
          <el-radio :label="0">默认</el-radio>
          <el-radio :label="1">1年以内</el-radio>
          <el-radio :label="2">1-5年</el-radio>
          <el-radio :label="3">5-10年</el-radio>
          <el-radio :label="4">10-15年</el-radio>
          <el-radio :label="5">15年以上</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否清洗：" style="margin-left: 200px">
        <el-radio-group v-model="searchObj.status" @change="fetchData()">
          <el-radio :label="0">未清洗</el-radio>
          <el-radio :label="1">已清洗</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
    </el-form>
    <el-form>
      <el-form-item label="所在地区：">
        <el-select
          v-model="searchObj.areaId"
          placeholder="请选择地区"
          clearable
          @change="fetchData()">
          <el-option
            v-for="area in areaCityNestedList"
            :key="area.id"
            :label="area.name"
            :value="area.id"/>
        </el-select>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      fit
      highlight-current-row>
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="area" label="省级" width="80" align="center"/>

      <el-table-column prop="city" label="城市" width="80" align="center"/>

      <el-table-column prop="companyName" label="公司名字" width="220" align="center"/>

      <el-table-column prop="legal" label="法人" width="80" align="center"/>

      <el-table-column prop="capitalMoney" label="注册资本金" width="200" align="center"/>

      <el-table-column prop="projectType" label="工程种类" width="130" align="center"/>

      <el-table-column prop="tell" label="单位电话" width="220" align="center"/>

      <el-table-column prop="tag" label="标签" width="80" align="center"/>

      <el-table-column label="最近修改时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.lastUpdateTime.substr(0, 10) }}
        </template>
      </el-table-column>

      <el-table-column label="是否清洗" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '未清洗' : '已清洗' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <!-- 路由到另一个界面 -->
          <router-link :to="'/baku/laowu/company/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :total="total"
      :current-page="page"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      style="padding: 30px 0; text-align: center;"
      @current-change="fetchData"/>
  </div>
</template>

<script>
import laowu from '@/api/baku/dggj/laowu'
import CountTo from 'vue-count-to'

export default {
  name: 'List',
  components: {
    CountTo
  },
  data() {
    return {
      listLoading: true,
      list: null,
      total: 0,
      page: 1,
      limit: 20,
      capitalMoney: 0.00,
      dateEstaRadio: 0,
      areaCityNestedList: [],
      searchObj: {
        companyName: '',
        projectType: '',
        capitalMoneyMin: 0,
        capitalMoneyMax: 0,
        dateEsta: '',
        areaId: '',
        status: 0
      },
      isCleanNum: 0,
      isNotCleanNum: 0
    }
  },

  created() {
    this.fetchData()
    this.getIsClean()
    this.getAreaCityList()
  },

  methods: {
    fetchData(page = 1) {
      this.page = page
      this.listLoading = true
      laowu.getPageList(this.page, this.limit, this.searchObj).then(result => {
        if (result.success === true) {
          this.list = result.data.rows.list
          this.total = result.data.total
        }
        this.listLoading = false
      })
    },

    // 获取清洗数量
    getIsClean() {
      laowu.getIsClean().then(result => {
        if (result.success === true) {
          this.isCleanNum = result.data.isCleanNum
          this.isNotCleanNum = result.data.isNotCleanNum
        }
      })
    },

    // 获取地区筛选条件列表
    getAreaCityList() {
      laowu.getAreaCityList().then(result => {
        if (result.success === true) {
          this.areaCityNestedList = result.data.items
        }
      })
    },

    // 注册资金单选框变更
    capitalMoneyChange() {
      switch (this.capitalMoney) {
        case 0:
          this.searchObj.capitalMoneyMin = 0
          this.searchObj.capitalMoneyMax = 0
          break
        case 1:
          this.searchObj.capitalMoneyMin = 0
          this.searchObj.capitalMoneyMax = 1
          break
        case 2:
          this.searchObj.capitalMoneyMin = 1
          this.searchObj.capitalMoneyMax = 5
          break
        case 3:
          this.searchObj.capitalMoneyMin = 5
          this.searchObj.capitalMoneyMax = 10
          break
        case 4:
          this.searchObj.capitalMoneyMin = 10
          this.searchObj.capitalMoneyMax = 0
          break
      }
      this.fetchData()
    },

    // 成立日期单选框变更
    dateEstaChange() {
      this.dateEstaRadio === 0 ? this.searchObj.dateEsta = ''
        : this.dateEstaRadio === 1 ? this.searchObj.dateEsta = '1年以内'
          : this.dateEstaRadio === 2 ? this.searchObj.dateEsta = '1-5年'
            : this.dateEstaRadio === 3 ? this.searchObj.dateEsta = '5-10年'
              : this.dateEstaRadio === 4 ? this.searchObj.dateEsta = '10-15年'
                : this.searchObj.dateEsta = '15年以上'
      this.fetchData()
    }

  }

}
</script>

<style scoped>

</style>
